<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
	<title>hy</title>
	<link rel="stylesheet" type="text/css" href="../css/tagA.css">
	<link rel="stylesheet" href="../css/rule.css">
	<link rel="icon" href="../images/hf.ico">
</head>
<body>
<audio id="music" autoplay="autoplay" loop="loop">
	<source src="./aSong.mp3" type="audio/mpeg">
</audio>
	<div class="box" style="height: 800px">
		<div class="rule rule1" >
			<p id="rule1"></p>
			<br>
		</div>
		<div class="rule rule2">
			<p id="rule2"></p>
			<br>
		</div>
		<div class=" rule rule3">
			<p id="rule3"></p>
			<br>
		</div>
		<div class="rule rule4" >
			<p id="rule4"></p>
			<br>
		</div>
		<div class="rule rule5">
			<p id="rule5"></p>
			<br>
		</div>
		<div class="rule rule6">
			<p id="rule6"></p>
			<br>
		</div>
		<div class="rule rule7">
			<p id="rule7"></p>
			<br>
		</div>
		<div class="rule rule8">
			<p id="rule8"></p>
			<br>
		</div>
		<div class="rule rule9">
			<p id="rule9"></p>
			<br>
		</div>
		<div class="rule rule10">
			<p id="rule10"></p>
			<br>
		</div>
		<div class="rule rule11">
			<p id="rule11"></p>
			<br>
		</div>
		<div class="rule rule12">
			<p id="rule12"></p>
			<br>
		</div>
		<div class="rule rule13">
			<p id="rule13"></p>
			<br>
		</div>
		<div class="rule rule14">
			<p id="rule14"></p>
			<br>
		</div>

	</div>

	<script src="../js/jquery-1.9.1.min.js"></script>
	<script>
		var flake = $("<div class='xh'></div>").css({position:"absolute","top":"0px"}).html("❤");
		var dh = $(window).height();
		var dw = $(window).width();
		var flakeColor = "#f00";
		var newFlake = 100;
		var minFlake = 5;
		var maxFlake = 50;
		// here
		setInterval(function(){
			var flakeSize = minFlake + Math.random()*maxFlake;
			var startLeft = Math.random()*dw;
			var startOpacity = 0.7 + Math.random()*0.3;
			var endTop = dh - 100;
			var endLeft = dw*Math.random();
			var speed = Math.random()*3000+5000;
			flake.clone().appendTo($("body")).css({
				"left":startLeft,
				"opacity":startOpacity,
				"font-size":flakeSize,
				"color":flakeColor,
			}).animate({
				"top":endTop,
				"left":endLeft,
				"opacity":0.1
			},speed,function(){
				$(this).remove()
			});
		},newFlake);
	</script>

	<script type="text/javascript">
		var str1 = "对我来说遇见你是我的幸运";
		var str2 = "最近一段时间我真的好难过";
		var str3 = "请你吃棒棒糖，你理我一下好吗？";

		var str4 = "那个那个不要瞎想,就是好难过,想你理我一小下";
		var str5 = "我郑重其事的为前段时间所做的事情向你道歉";
		var str6 = "那天我的做法太过于激进，说的话太过于强势";
		var str7 = "抱歉，那天我失去了理智，真的很抱歉";
		var str8 = "所以可以理我一下下嘛，一下就好";
		var str9 = "最近我一直在想一个理由，现在明白了";
		var str10 = "我当初做的那些过分的事情就是理由";
		var str11 = "对不起，我已经为那些话付出了代价";
		var str12 = "你这段时间不理我对我来说就是最大的惩罚";
		var str13 = "能不能看在我最近静心反思的份上原谅我";
		var str14 = "你已经很久没理我了，理一理我好吗？";


		var i = 0;
		var j = 1;

		window.onload = function show1(){

			var rule1 = document.getElementById("rule1");
			rule1.innerHTML += str1.charAt(i);

			i ++;
			var time = setTimeout(show1,100);
			if(i == str1.length){
				i = 0;
				// j ++;
				clearTimeout(time);
				show2();
			}
		}
		function show2(){

			var rule2 = document.getElementById("rule2");
			rule2.innerHTML += str2.charAt(i);
			i ++;
			var time = setTimeout(show2,100);
			if(i == str2.length){
				i = 0;
				// j ++;
				clearTimeout(time);
				show3();
			}
		}
		function show3(){
			// var str = 'str'+j;
			// var rule = 'str'+j;

			// var ruler = document.getElementById("eval(rule)");

			// ruler.innerHTML += eval(str).charAt(i);
			var rule3 = document.getElementById("rule3");
			rule3.innerHTML += str3.charAt(i);
			i ++;
			var time = setTimeout(show3,100);
			if(i == str3.length){
				i = 0;
				// j ++;
				clearTimeout(time);
				show4();
			}
		}
		function show4(){
			// var str = 'str'+j;
			// var rule = 'str'+j;

			// var ruler = document.getElementById("eval(rule)");

			// ruler.innerHTML += eval(str).charAt(i);
			var rule4 = document.getElementById("rule4");
			rule4.innerHTML += str4.charAt(i);
			i ++;
			var time = setTimeout(show4,100);
			if(i == str4.length){
				i = 0;
				// j ++;
				clearTimeout(time);
				show5();
			}
		}
		function show5(){
			// var str = 'str'+j;
			// var rule = 'str'+j;

			// var ruler = document.getElementById("eval(rule)");

			// ruler.innerHTML += eval(str).charAt(i);
			var rule5 = document.getElementById("rule5");
			rule5.innerHTML += str5.charAt(i);
			i ++;
			var time = setTimeout(show5,100);
			if(i == str5.length){
				i = 0;
				// j ++;
				clearTimeout(time);
				show6();
			}
		}
		function show6(){
			// var str = 'str'+j;
			// var rule = 'str'+j;

			// var ruler = document.getElementById("eval(rule)");

			// ruler.innerHTML += eval(str).charAt(i);
			var rule6 = document.getElementById("rule6");
			rule6.innerHTML += str6.charAt(i);
			i ++;
			var time = setTimeout(show6,100);
			if(i == str6.length){
				i = 0;
				// j ++;
				clearTimeout(time);
				show7();
			}
		}
		function show7(){
			// var str = 'str'+j;
			// var rule = 'str'+j;

			// var ruler = document.getElementById("eval(rule)");

			// ruler.innerHTML += eval(str).charAt(i);
			var rule7 = document.getElementById("rule7");
			rule7.innerHTML += str7.charAt(i);
			i ++;
			var time = setTimeout(show7,100);
			if(i == str7.length){
				i = 0;
				// j ++;
				clearTimeout(time);
				show8();
			}
		}
		function show8(){

			var rule8 = document.getElementById("rule8");
			rule8.innerHTML += str8.charAt(i);
			i ++;
			var time = setTimeout(show8,100);
			if(i == str8.length){
				i = 0;
				// j ++;
				clearTimeout(time);
				show9();

			}
		}
		function show9(){

			var rule9 = document.getElementById("rule9");
			rule9.innerHTML += str9.charAt(i);
			i ++;
			var time = setTimeout(show9,100);
			if(i == str9.length){
				i = 0;
				// j ++;
				clearTimeout(time);
				show10();

			}
		}
		function show10(){

			var rule10 = document.getElementById("rule10");
			rule10.innerHTML += str10.charAt(i);
			i ++;
			var time = setTimeout(show10,100);
			if(i == str10.length){
				i = 0;
				// j ++;
				clearTimeout(time);
				show11();

			}
		}
		function show11(){

			var rule11 = document.getElementById("rule11");
			rule11.innerHTML += str11.charAt(i);
			i ++;
			var time = setTimeout(show11,100);
			if(i == str11.length){
				i = 0;
				// j ++;
				clearTimeout(time);
				show12();

			}
		}
		function show12(){

			var rule12 = document.getElementById("rule12");
			rule12.innerHTML += str12.charAt(i);
			i ++;
			var time = setTimeout(show12,100);
			if(i == str12.length){
				i = 0;
				// j ++;
				clearTimeout(time);
				show13();
			}
		}
		function show13(){

			var rule13 = document.getElementById("rule13");
			rule13.innerHTML += str13.charAt(i);
			i ++;
			var time = setTimeout(show13,100);
			if(i == str13.length){
				i = 0;
				// j ++;
				clearTimeout(time);
				show14();

			}
		}
		function show14(){

			var rule14 = document.getElementById("rule14");
			rule14.innerHTML += str14.charAt(i);
			i ++;
			var time = setTimeout(show14,100);
			if(i == str14.length){
				i = 0;
				// j ++;
				clearTimeout(time);

			}
		}


	</script>

</body>
</html>